<div class="layout" id="project" style="padding:15px;width:100%;height:100%;text-align: center;vertical-align: middle;">
    <card style="width:80%;height:70%;margin: auto;text-align: start;">
        <p slot="title">
            <icon type="ios-film-outline"></icon>
            选择项目
        </p>
        <a href="#" slot="extra" class="bold" @click="AddProject">
            打开
        </a>
        <a href="#" slot="extra" class="bold" @click="createProject">
            创建
        </a>
        <div id="project-list">
            <List border size="large">
                <ListItem v-for="(proj,index) in module.config.projects">
                    <ListItemMeta>
                        <div slot="title" @click="openProject(proj)" style="cursor:pointer;">
                            <a class="bold">{{proj.name}}</a>
                            <p style="color:#ccc;font-size:10px;">{{proj.path}}</p>
                        </div>
                    </ListItemMeta>
                    <template slot="action">
                        <li>
                            <icon size="25" type="ios-trash-outline" @click="removeProject(proj)"></icon>
                        </li>
                    </template>
                </ListItem>
            </List>
        </div>
    </card>
    <modal v-model="showCreateUI" title="创建项目" :mask-closable="false" :closable="false">
        <i-form v-model="newProjectInfo">
            <form-item label="项目名称" prop="name">
                <i-input v-model="newProjectInfo.name" placeholder="Enter something..."></i-input>
            </form-item>
            <form-item label="位置">
                <i-input v-model="newProjectInfo.path" placeholder="Enter something...">
                    <i-button slot="append" icon="ios-folder-open" @click="selectDir(newProjectInfo)"></i-button>
                </i-input>
            </form-item>

            <form-item label="模板" prop="template">
                <radio-group v-model="newProjectInfo.template">
                    <radio v-for="template in module.templates" :label="template.name">{{template.name}}</radio>
                </radio-group>
            </form-item>
        </i-form>
        <div slot="footer" style="text-align: end;">
            <i-button @click="handleReset()">取消</i-button>
            <i-button type="primary" @click="handleSubmit()">创建</i-button>
        </div>
    </modal>
</div>